import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter); //注册路由插件（本质：在Vue的原型上添加了 $router  $route ...）

// 面试 ： 什么是路由
// 以前的页面跳转全部都用超链接实现，在SPA单页面应用状下，页面的跳转可以使用Vue-Router来实现
// 路由 ： 路径 → 组件的一个映射关系，一个路由就是一个对象 {path:"", name:"", component:xxx}
/*路径怎么触发：
        <router-link to="/路径">菜单名字</router-link> 将来打包后就变成超链接了   this.$router.push/replace()
  组件怎么呈现  ： <router-view></router-view>
 */


import ComponentView from "../views/ComponentView.vue"  // 同步加载组件

// 配置路由表（本质：配置可以使用的所有路由映射关系）
const routes = [
    {
      path: "/component",
      name: "component",
      component : ComponentView
    },
    {
       path: "/request",
       name: "request",
       component:  () => import("@/views/RequestView.vue")   // 异步加载组件可以实现路由的延迟加载（路由懒加载）
    }
];

// 实例化路由对象
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;  // 将已经配置好的路由实例暴露出去
